<template>
  <div id="inventory">
    <Headers/>
    <CommmonBg>
      <div class="inventory-del">{{$t('inventory.titles')}}</div>
      <div class="details-content">
        <div class="img-del">
          <p class="del-title">{{$t('inventory.totalInventory')}}</p>
          <p class="totalNum">{{totalNum}}</p>
        </div>
        <div class="today-del">
          <h4>{{$t('inventory.todayVal')}}{{todayVal}}</h4>
          <p>{{$t('inventory.partnerTotal')}}{{partnerTotal}}</p>
          <p>{{$t('inventory.eocPrice')}}{{eocPrice}}</p>
        </div>
      </div>
    </CommmonBg>
    <div class="list-container">
      <List :lists="lists"/>
    </div>
  </div>
</template>

<script>
import CommmonBg from "components/CommonBg";
import List from "components/Lists";
export default {
  name: "inventory",
  data() {
    return {
      totalNum: "0.00",
      todayVal: "0.30%",
      partnerTotal: "0.00",
      eocPrice: "$1.43",
      lists: {
        type: "asset",
        listArray: [
          {
            icon: require("../../../assets/ai.png"),
            name: this.$t("inventory.todayZN"),
            amount: "0.00",
            size: "25",
            fontSize: 15
          },
          {
            icon: require("../../../assets/link.png"),
            name: this.$t("inventory.todayLJ"),
            amount: "0.00",
            size: "25",
            fontSize: 15
          },
          {
            icon: require("../../../assets/gg.png"),
            name: this.$t("inventory.todayYJ"),
            amount: "0.00",
            size: "25",
            fontSize: 15
          },
          {
            icon: require("../../../assets/jy.png"),
            name: this.$t("inventory.todayJYYJ"),
            amount: "0.00",
            size: "25",
            fontSize: 15
          }
        ]
      }
    };
  },
  components: {
    CommmonBg,
    List
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../utils/styl/mixin.styl'
#inventory
  positCenter(0, 0, 0, 0, 0, 0)
  width 100%
  background-color $bodyBg
  .bank_asset
    margin-top rem(29)
    height rem(230)
    .inventory-del
      margin-left rem(68)
      padding-top rem(92)
      color $fontColor
      font-size rem(18)
      text-align left
    .details-content
      margin-top rem(10)
      box-sizing border-box
      padding 0 rem(26) 0 rem(14)
      display flex
      justify-content space-between
      .img-del
        width rem(183)
        height rem(183)
        bgImg('../../../assets/bankasset_bg.png', contain)
        display flex
        flex-direction column
        justify-content center
        p
          color $fontColor
        .del-title
          font-size rem(14)
          font-weight bold
        .totalNum
          margin-top rem(5)
          font-size rem(25)
          font-weight bold
      .today-del
        margin-top rem(35)
        flex 1
        color $fontColor
        text-align left
        h4
          color $typeColor
          font-size rem(22)
          line-height rem(30)
        p
          color $fontColor
          font-size rem(12)
          line-height rem(16)
  .list-container
    margin-top rem(85)
</style>
